<template>
  <div class="personal-setting">
    <h3 class="title">
      <icon-svg name="iconSetting"></icon-svg>
      个性化设置
    </h3>
    <el-form
      ref="editForm"
      :model="editForm"
      label-width="220px"
      label-position="left"
      @keyup.enter.native="onSubmit()"
    >
      <div class="section">
        <div class="section-content">
          <el-row :gutter="20">
            <el-col :span="12" class="personal-star">
              <el-form-item label="登录后首页" prop="LOGON_FIRSTPAGE">
                <el-select v-model="editForm.LOGON_FIRSTPAGE" :disabled="!editing">
                  <el-option label="首页" value="home"></el-option>
                  <el-option
                    v-for="item in menuList"
                    :key="item.menuId"
                    :label="item.menuNm"
                    :value="item.menuRouteName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="section">
        <div class="section-content">
          <el-row>
            <el-col :span="24" align="right"
              ><label></label>
              <template v-if="!editing">
                <el-button type="primary" @click="edit">修改</el-button>
              </template>
              <template v-else>
                <el-button @click="cancelEdit">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
              </template>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  data() {
    return {
      editing: false,
      params: [],
      menuList: [],
      editForm: {
        LOGON_FIRSTPAGE: 'home'
      }
    }
  },
  created() {
    this.getMenuList()
    this.getParams()
  },
  methods: {
    getMenuList() {
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysMenuMgr/me/indexWithoutMgr'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.menuList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getParams() {
      this.$ajax({
        url: this.$ajax.setUrl('auth/authUserIndvCfg'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.params = data.data
          this.reset()
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    edit() {
      this.editing = true
    },
    cancelEdit() {
      this.reset()
      this.editing = false
    },
    reset() {
      Object.keys(this.editForm).forEach(key => {
        this.params.forEach(v => {
          if (key === v.indvCfgType) {
            this.editForm[key] = isNaN(Number(v.indvCfgVal)) ? v.indvCfgVal : Number(v.indvCfgVal)
          }
        })
      })
    },
    submit() {
      let params = []
      Object.keys(this.editForm).forEach(key => {
        params.push({
          indvCfgType: key,
          indvCfgVal: this.editForm[key].toString()
        })
      })
      this.$ajax({
        url: this.$ajax.setUrl('auth/authUserIndvCfg'),
        method: 'put',
        data: this.$ajax.setData(params, false, 'json')
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$message.success(data.data || data.msg)
          this.editing = false
          this.getParams()
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.personal-setting {
  .title {
    vertical-align: middle;
    margin: 0 20px;
    padding: 10px 0;
    border-bottom: 1px solid $border-color;
    color: $theme-color;
    svg {
      width: 25px;
      height: 25px;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
  .section {
    width: 960px;
    padding: 0 0 10px 30px;
    margin: 0 10px;
    border-bottom: 1px solid #e6e6e6;
    &:last-child {
      border: 0;
    }
    .section-content {
      .el-col {
        padding: 15px 0;
        vertical-align: middle;
        .el-input {
          &.is-disabled .el-input__inner {
            color: #000;
            cursor: default;
          }
        }
        .el-form-item__label {
          color: #000;
        }
        .el-input-number {
          width: 100%;
          .el-input.is-disabled .el-input__inner {
            color: #606266;
            background-color: #fff;
          }
        }
      }
      .personal-star {
        .el-form-item__label:before {
          display: inline;
          content: '*';
          color: #f56c6c;
          margin-right: 4px;
        }
      }
    }
  }
}
</style>
